<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->


<!-- top -->
<div class="ddp-pop-side-top">
  {{'msg.page.ui.color.palette' | translate}}
  <a *ngIf="'context' !== layerType" href="javascript:" class="ddp-btn-close" (click)="onClose()"></a>
</div>
<!-- //top -->
<!-- contents -->
<div *ngIf="'heatmap' !== layerType && 'MEASURE' !== colorType" class="ddp-pop-side-contents">
  <ul class="ddp-list-series">
    <li *ngFor="let item of defaultColorList" (click)="changeColor(item)">
      <!-- 선택시 ddp-selected 추가 -->
      <button class="ddp-btn-color-series{{item['index']}} ddp-type" [ngClass]="{'ddp-selected': item['colorNum'] == schema}"></button>
    </li>
  </ul>
</div>
<!-- //contents -->
<!-- contents -->
<div *ngIf="'heatmap' !== layerType && 'MEASURE' === colorType"  class="ddp-pop-side-contents">
  <div class="ddp-box-slider">
    <div class="ddp-wrap-option-slider">
      <span class="ddp-label-slider">{{'msg.page.ui.color.invert' | translate}}</span>
      <!-- Slide THREE -->
      <div class="ddp-checkbox-slide ddp-checkbox-automatic2">
        <input type="checkbox" id="invertColor" name="check" [checked]="isChartColorInverted()" (click)="invertColor()">
        <label for="invertColor"><span class="ddp-slide"></span></label>
      </div>
      <!-- //Slide THREE -->
    </div>
  </div>
  <span class="ddp-pop-sub-title">{{'msg.page.th.seq.display' | translate}}</span>
  <ul class="ddp-list-series">
    <li *ngFor="let item of measureColorList; let num = index">
      <!-- 선택시 ddp-selected 추가 -->
      <button class="ddp-btn-color-type{{item['index']}} ddp-type" [ngClass]="{'ddp-selected': isChartColorSelected(item), 'sys-inverted': isTemplateColorInverted === undefined ? isChartColorInverted() : isTemplateColorInverted}"
        (click)="changeColor(item)"></button>
    </li>
  </ul>

  <span class="ddp-pop-sub-title">{{'msg.page.th.contrast.display' | translate}}</span>
  <ul class="ddp-list-series">
    <li *ngFor="let item of measureReverseColorList; let num = index">
      <!-- 선택시 ddp-selected 추가 -->
      <button class="ddp-btn-color-type{{item['index']}} ddp-type" [ngClass]="{'ddp-selected': isChartColorSelected(item), 'sys-inverted': isTemplateColorInverted === undefined ? isChartColorInverted() : isTemplateColorInverted}"
              (click)="changeColor(item)"></button>
    </li>
  </ul>
</div>
<!-- //contents -->
<!-- contents -->
<div *ngIf="'heatmap' === layerType" class="ddp-pop-side-contents">
  <ul class="ddp-list-series">
    <li *ngFor="let item of mapHeatmapColorList" (click)="changeColor(item)">
      <!-- 선택시 ddp-selected 추가 -->
      <button class="ddp-btn-color-heatmap{{item['index']}}"
              [ngClass]="{'ddp-selected' : item['colorNum'] === schema}"></button>
    </li>
  </ul>
</div>
<!-- //contents -->
